<template>
  <div class="login_pass">
     <el-form
      ref="ruleFormRef"
      :model="PhoneForm"
      :rules="PhoneRule"
      label-width="80px"
   >
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="PhoneForm.phone"></el-input>
    </el-form-item>
     <el-form-item label="验证码" prop="code">
      <div class="code">
        <el-input v-model="PhoneForm.code"></el-input>
        <el-button type="primary">获取验证码</el-button>
      </div>
    </el-form-item>
     </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  setup () {
    const PhoneForm = reactive({
      phone: '',
      code: ''
    })
    const PhoneRule = reactive({
      phone: [
        {
          required: true,
          message: '请输入手机号',
          trigger: 'blur',
        },
        {
           pattern: /^1\d{10}$/,
           message: '您的手机号码输入错误'
        }
        ],
        code: [
        {
          required: true,
          message: '请输入验证码',
          trigger: 'blur',
        },
        {
          min: 6,
          max: 6,
          message: '长度为6位数字',
          trigger: 'blur'
        },
     ],
    })
    return {
      PhoneForm,
      PhoneRule
    }
  }
})
</script>
<style lang="less" scoped>
.code {
  display: flex;
  .el-button {
    margin-left: 10px;
  }
}
</style>